<template>
  <view class="my">
    <view class="bg">
      <!-- 动态获取状态栏高度占位 -->
      <!-- <view :style="{ height: statusBarHeight2 }"></view> -->
      <view class="bianji" @click="jumpInfo">
        <image
          src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/bianji.png"
        ></image>
      </view>
      <view class="touxiang">
        <view class="img">
          <template v-if="userinfo.headImage">
            <image :src="userinfo.headImage" mode="aspectFill"></image>
          </template>
          <template v-else>
            <image
              src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/avatar.png"
              mode="aspectFill"
            ></image>
          </template>
        </view>
        <view class="text">
          <!-- <view>登录</view> -->
          <view>{{ userinfo.nickName || "用户" }}</view>
        </view>
      </view>
      <view class="zhenliao">
        <view @click="totreatment(1)">
          <view class="number">
            {{ userinfo.acceptCount || 0 }}
          </view>
          <view style="font-size: 28rpx"> 在线问诊 </view>
        </view>
        <view @click="totreatment(2)">
          <view class="number">
            {{ userinfo.visitCount || 0 }}
          </view>
          <view style="font-size: 28rpx"> 上门治疗 </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="" @click="toDetail(1)">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/zhangdan.png"
          ></image>
          <view style="margin-top: 20rpx">账单记录</view>
        </view>
        <view>
          <image
            style="width: 32rpx; height: 32rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
          ></image>
        </view>
      </view>
      <view class="" @click="toDetail(2)">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/yisheng.png"
          ></image>
          <view style="margin-top: 20rpx">我的医生</view>
        </view>
        <view>
          <image
            style="width: 32rpx; height: 32rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
          ></image>
        </view>
      </view>
      <view class="" @click="toDetail(3)">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/bingli.png"
          ></image>
          <view style="margin-top: 20rpx">我的病历</view>
        </view>
        <view>
          <image
            style="width: 32rpx; height: 32rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
          ></image>
        </view>
      </view>
      <view class="" @click="tProtocol(1)">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/bingli.png"
          ></image>
          <view style="margin-top: 20rpx">注册协议</view>
        </view>
        <view>
          <image
            style="width: 32rpx; height: 32rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
          ></image>
        </view>
      </view>
      <view class="" @click="tProtocol(2)">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/bingli.png"
          ></image>
          <view style="margin-top: 20rpx">隐私协议</view>
        </view>
        <view>
          <image
            style="width: 32rpx; height: 32rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
          ></image>
        </view>
      </view>
      <view class="">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/kefu.png"
          ></image>
          <view style="margin-top: 20rpx">联系客服</view>
        </view>
        <view style="color: #3fa3fa" @click="callphone">
          <!-- <view style="color: #3fa3fa;"> -->
          {{ servephone || "" }}
        </view>
      </view>
      <view class="" @click="show3 = true">
        <view class="left">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/kefu.png"
          ></image>
          <view style="margin-top: 20rpx">注销</view>
        </view>
        <view>
          <image
            style="width: 32rpx; height: 32rpx"
            src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
          ></image>
        </view>
      </view>
    </view>
    <view class="tuichu" @click="Logout"> 退出登录 </view>
    <!-- 模态框 -->
    <u-modal
      :show="show3"
      title="您确定要注销账号吗？"
      @confirm="clearAccount"
      showCancelButton
      @cancel="show3 = false"
      cancelText="取消"
      confirmText="确定"
    ></u-modal>
    <!-- 	<TabBar :current-page="2" /> -->
  </view>
</template>

<script>
import {
  getLoginUserMessgae,
  quit,
  getSysContent,
  killMe,
} from '../../api/index.js'
export default {
  data() {
    return {
      statusBarHeight2: "",
      userinfo: {},
      servephone: "",
      baseurl: "",
      show3: false,
    };
  },
  created() {
    if (!uni.getStorageSync("token")) {
      uni.reLaunch({
        url: "../login/login",
      });
    }
    console.log(this.statusBarHeight());
    console.log(this.baseurl);
    this.statusBarHeight2 = this.statusBarHeight();
    this._getLoginUserMessgae();
    this._getSysContent();
  },
  onLoad() {
    if (!uni.getStorageSync("token")) {
      uni.reLaunch({
        url: "../login/login",
      });
    }
    console.log(this.statusBarHeight());
    console.log(this.baseurl);
    this.statusBarHeight2 = this.statusBarHeight();
    this._getLoginUserMessgae();
    this._getSysContent();
  },
  onShow() {
    if (!uni.getStorageSync("token")) {
      uni.reLaunch({
        url: "../login/login",
      });
    }
    this._getLoginUserMessgae();
    this._getSysContent();
  },
  methods: {
    // 注销账号
    async clearAccount() {
      const res = await killMe();
      uni.clearStorage();
      uni.reLaunch({
        url: "/chronicDisease/pages/login/login",
      });
    },
    //查看协议
    tProtocol(e) {
      uni.navigateTo({
        url: "/chronicDisease/pages/login/agreement?category=" + e,
      });
    },
    //获取客服电话
    _getSysContent() {
      getSysContent({
        category: 7,
      }).then((res) => {
        if (res.code == 200) {
          this.servephone = res.data;
        }
        if (res.code == 501) {
          uni.removeStorageSync("token");
          uni.reLaunch({
            url: "../login/login",
          });
        }
      });
    },
    //退出登录
    Logout() {
      uni.showModal({
        title: "提示",
        content: "确认退出吗？",
        success: (res) => {
          if (res.confirm) {
            quit().then(() => {
              uni.clearStorageSync();
              if (uni.$im.loginState) {
                // 即时通讯退出登录
                this.$im.logout().then((res) => {
                  uni.reLaunch({
                    url: "/chronicDisease/pages/login/login",
                  });
                });
                return;
              }
              uni.clearStorageSync();
              uni.reLaunch({
                url: "/chronicDisease/pages/login/login",
              });
            });
          }
        },
      });
    },
    //获取用户信息
    _getLoginUserMessgae() {
      getLoginUserMessgae().then((res) => {
        if (res.code == 200) {
          this.userinfo = res.data;
          if (this.userinfo.headImage) {
            this.userinfo.headImage =
              this.$store.state.chronic.baseUrl + this.userinfo.headImage;
          }
        }
        if (res.code == 501) {
          uni.removeStorageSync("token");
          uni.reLaunch({
            url: "../login/login",
          });
        }
      });
    },
    //拨打电话
    callphone() {
      uni.makePhoneCall({
        phoneNumber: this.servephone, //仅为示例
      });
    },
    toDetail(e) {
      if (e == 1) {
        //账单记录
        uni.navigateTo({
          url: "../my/billing-records?money=" + this.userinfo.money,
        });
      }
      if (e == 2) {
        //我的医生
        uni.navigateTo({
          url: "../my/mydoctor",
        });
      }
      if (e == 3) {
        //我的病历
        uni.navigateTo({
          url: "../my/medical-record",
        });
      }
    },
    //个人信息
    jumpInfo() {
      uni.navigateTo({
        url: "../my/personalInformation",
      });
    },
    //诊疗
    totreatment(category) {
      uni.navigateTo({
        url: "../my/treatmentrecords?category=" + category,
      });
    },
    statusBarHeight() {
      // 获取状态栏高度
      const { statusBarHeight } = uni.getSystemInfoSync() || {};
      console.log("状态栏高度", statusBarHeight);
      return (statusBarHeight || 0) + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  padding-bottom: 100rpx;
  .tuichu {
    margin-top: 80rpx;
    font-size: 28rpx;
    color: #3fa3fa;
    text-align: center;
    // padding-bottom: 80rpx;
  }
  .list {
    padding-top: 100rpx;
    background-color: #fcfcfc;

    > view {
      padding: 0 40rpx;
      height: 128rpx;
      display: flex;
      align-items: center;
      border-bottom: 4rpx solid #f7f7f7;
      justify-content: space-between;
      background-color: #fff;

      .left {
        display: flex;
        font-size: 28rpx;
        image {
          margin-right: 20rpx;
        }
      }
    }
  }

  .bg {
    padding: 54rpx 40rpx 0 40rpx;
    height: 494rpx;
    background: linear-gradient(180deg, #7cc1fd 0%, #3fa3fa 100%);
    position: relative;

    .zhenliao {
      // text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      margin: 0 auto;
      position: absolute;
      width: 670rpx;
      height: 196rpx;
      background-color: #fff;
      border-radius: 24rpx;
      bottom: -80rpx;
      > view {
        text-align: center;
      }
      .number {
        margin-top: 38rpx;
        margin-bottom: 20rpx;
        color: #3fa3fa;
        font-size: 44rpx;
        font-weight: 600;
      }
    }

    .touxiang {
      display: flex;
      align-items: center;
      margin-top: 24rpx;

      .text {
        margin-left: 32rpx;
        color: #fff;
        font-size: 36rpx;
        font-weight: 600;
      }

      .img {
        > image {
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
        }
      }
    }

    > .bianji {
      text-align: right;

      > image {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
}
</style>
